<template>
  <div class="custom-tree-container">
    <el-row type="flex" justify="space-around">
      <el-col :span="10" style="border:1px solid #ccc;border-radius:8px;padding:20px">
        <div class="block">
          <div>机构</div>
          <el-tree
            :data="dataList"
            show-checkbox
            node-key="id"
            default-expand-all
            :expand-on-click-node="false"
          >
            <span slot-scope="{ node, data }" class="custom-tree-node">
              <span>{{ node.label }}</span>
              <span>
                <el-button
                  v-show="data.type!=='windows'"
                  type="text"
                  size="mini"
                  @click="() => append(node,data)"
                >
                  添加
                </el-button>
                <el-button
                  type="text"
                  size="mini"
                  @click="() => edite(node,data)"
                >
                  修改
                </el-button>
                <el-button
                  type="text"
                  size="mini"
                  @click="() => remove(node, data)"
                >
                  删除
                </el-button>
              </span>
            </span>
          </el-tree>
        </div>

      </el-col>
      <el-col :span="10" style="border:1px solid #ccc;border-radius:8px;padding:20px">
        <div v-html="textList" />
      </el-col>
    </el-row>
    <el-container style="padding:15px">
      <el-button style="margin:0 auto" type="primary" @click="() => check()">查看数据</el-button>
    </el-container>
    <el-dialog :visible.sync="addhallModelFlag" :title="title">
      <el-form ref="dataForm" label-position="left" label-width="70px" style="width: 50%;margin:0 auto">
        <el-form-item label="大厅名称" prop="title">
          <el-input v-model="modelObj.halls.name" />
        </el-form-item>

      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addHall()">保存</el-button>
        <el-button type="primary" @click="addhallModelFlag = false">取消</el-button>
      </span>
    </el-dialog>

    <el-dialog :visible.sync="addwinModelFlag" :title="title">
      <el-form ref="dataForm" label-position="left" label-width="70px" style="width: 50%;margin:0 auto">
        <el-form-item label="窗口名称" prop="title">
          <el-input v-model="modelObj.windows.name" />
        </el-form-item>
        <el-form-item label="工作人员" prop="title">
          <el-input v-model="modelObj.windows.employee" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addWin()">保存</el-button>
        <el-button type="primary" @click="addwinModelFlag = false">取消</el-button>
      </span>
    </el-dialog>

    <el-dialog :visible.sync="editeFlag" :title="title">
      <el-form v-show="dataStore.type==&quot;bank&quot;" ref="dataForm" label-position="left" label-width="70px" style="width: 50%;margin:0 auto">
        <el-form-item label="银行名称" prop="title">
          <el-input v-model="modelObj.bank.name" />
        </el-form-item>
      </el-form>
      <el-form v-show="dataStore.type==&quot;halls&quot;" ref="dataForm" label-position="left" label-width="70px" style="width: 50%;margin:0 auto">
        <el-form-item label="大厅名称" prop="title">
          <el-input v-model="modelObj.halls.name" />
        </el-form-item>
      </el-form>
      <el-form v-show="dataStore.type==&quot;windows&quot;" ref="dataForm" label-position="left" label-width="70px" style="width: 50%;margin:0 auto">
        <el-form-item label="窗口名称" prop="title">
          <el-input v-model="modelObj.windows.name" />
        </el-form-item>
        <el-form-item label="工作人员" prop="title">
          <el-input v-model="modelObj.windows.employee" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="editeInfo()">保存</el-button>
        <el-button type="primary" @click="editeFlag = false">取消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
var count_id = 1000
// import { getPermission ,testapi ,testapi2} from '@/api/querystats'
import { getPermission } from '@/api/querystats'
export default {
  data() {
    return {
      addhallModelFlag: false,
      title: '',
      addwinModelFlag: false,
      editeFlag: false,
      listLoading: true,
      dataList: [],
      textList: '',
      modelObj: {
        windows: {
          name: '',
          employee: ''
        },
        halls: {
          name: ''
        },
        bank: {
          name: ''
        }

      },
      nodeStore: '',
      dataStore: ''

    }
  },
  created() {
    this.getData()
  },
  methods: {
    // testapi() {
    //   testapi2().then(response => {
    //     console.log('TCL: testapi222222222222222222 -> response', response)
    //     this.dataList = response.data
    //   }).catch(err => {
    //     console.log('TCL: testapi -> err', err)
    //   })
    // },
    getData() {
      getPermission().then(response => {
        this.dataList = response.data
        setTimeout(() => {
          this.listLoading = false
        }, 1.5 * 1000)
      })
    },
    append(node, data) {
      this.editeFlag = false
      this.modelObj = {
        windows: {
          name: '',
          employee: ''
        },
        halls: {
          name: ''
        },
        bank: {
          name: ''
        }
      }
      this.dataStore = data
      this.nodeStore = node
      if (data.type === 'bank') {
        this.addhallModelFlag = true
        this.title = '添加大厅'
      } else if (data.type === 'halls') {
        this.title = '添加窗口'
        this.addwinModelFlag = true
      }
    },
    addHall() {
      const ID = this.dataStore['id'] + '-' + (count_id++)
      const name = this.modelObj.halls.name
      const newChild = { id: ID, label: name, type: 'halls', children: [] }
      this.dataStore.children.push(newChild)
      this.$forceUpdate()
      this.addhallModelFlag = false
    },
    addWin() {
      const ID = this.dataStore['id'] + '-' + (count_id++)
      const name = this.modelObj.windows.name
      const emp = this.modelObj.windows.employee
      const newChild = { id: ID, label: name, type: 'windows', employee: emp }
      if (!this.dataStore.children) {
        this.$set(this.dataStore, 'children', [])
      }
      this.dataStore.children.push(newChild)
      this.$forceUpdate()
      this.addwinModelFlag = false
    },
    edite(node, data) {
      this.editeFlag = true
      this.dataStore = data
      this.nodeStore = node
      if (data.type === 'bank') {
        this.title = '修改支行'
        this.modelObj.bank.name = this.dataStore.label
      } else if (data.type === 'halls') {
        this.title = '修改大厅'
        this.modelObj.halls.name = this.dataStore.label
      } else if (data.type === 'windows') {
        this.title = '修改窗口'
        this.modelObj.windows.name = this.dataStore.label
        this.modelObj.windows.employee = this.dataStore.employee
      }
      this.$forceUpdate()
    },
    editeInfo() {
      this.editeFlag = false
      if (this.dataStore.type === 'bank') {
        this.dataStore.label = this.modelObj.bank.name
      } else if (this.dataStore.type === 'halls') {
        this.dataStore.label = this.modelObj.halls.name
      } else if (this.dataStore.type === 'windows') {
        this.dataStore.label = this.modelObj.windows.name
        this.dataStore.employee = this.modelObj.windows.employee
      }
    },
    remove(node, data) {
      const parent = node.parent
      const children = parent.data.children || parent.data
      const index = children.findIndex(d => d.id === data.id)
      children.splice(index, 1)
    },

    renderContent(h, { node, data, store }) {
      return (
        <span class='custom-tree-node'>
          <span>{node.label}</span>
          <span>
            <el-button size='mini' type='text' on-click={ () => this.append(data) }>Append</el-button>
            <el-button size='mini' type='text' on-click={ () => this.remove(node, data) }>Delete</el-button>
          </span>
        </span>)
    },
    check() {
      this.textList = JSON.parse(JSON.stringify(this.dataList))
    }
  }
}
</script>

<style>
.custom-tree-container{
  padding:10px 0
}
  .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
  }
</style>
